<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css" />
<link type="text/css"
	href="${pageContext.request.contextPath}/themes/icon.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<title>Insert title here</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
</head>
<script type="text/javascript">
	$(function() {
		
		 $.extend($.fn.validatebox.defaults.rules, {
		        /*必须和某个字段相等*/
		        equalTo: { validator: function (value, param) { return $(param[0]).val() == value; }, message: '两次输入的密码不一致' }
		       });

		$('#dg').datagrid({
			url : 'showAllUsers',
			fitColumns : true,
			pagination : true,
			toolbar : [ {
				iconCls : 'icon-add',
				text : "新建用户",
				handler : function() {
					//显示窗口
					$('#win').window('open');
					//清空文本框
					$('#tb1').textbox('clear');
					$('#tb2').textbox('clear');
					$('#tb3').textbox('clear');
					$('#tb4').textbox('clear');
					$('#tb5').textbox('clear');
					$('#tb6').textbox('clear');
					$('#tb7').textbox('clear');
					$('#tb8').textbox('clear');
				}
			}, '-', {
				iconCls : 'icon-edit',
				text : "修改用户信息",
				handler : function() {
					var up = $('#dg').datagrid('getSelections');
					if (up.length == 1) {
						$('#win1').window('open');
						//赋值
						$('#tb11').textbox('setValue', up[0].uid);
						$('#tb11').textbox('textbox').attr('readonly', true);
						$('#tb22').textbox('setValue', up[0].uname);
						$('#tb22').textbox('textbox').attr('readonly', true);
						$('#tb33').textbox('setValue', up[0].utel);
						$('#tb33').textbox('textbox').attr('readonly', true);
						$('#tb44').textbox('setValue', up[0].ustate);
						$('#tb55').textbox('setValue', up[0].rname);
						
					} else if (up.length == 0) {
						$.messager.alert('我的消息', '请勾选需要修改的信息', 'info');
						$('#dg').datagrid('clearSelections');
					} else {
						$.messager.alert('我的消息', '一次只能修改一条信息', 'info');
					}
				}
			}, '-',{
				//删除库存功能
				iconCls : 'icon-remove',
				text : '注销用户',
				handler : function() {
					var se = $('#dg').datagrid('getSelections');
					if (se.length > 0) {
						$.messager.confirm('确认对话框', '确定要注销该用户吗？', function(r) {
							if (r) {
								$.each(se, function(i, n) {
									var uid = se[i].uid;
									$.ajax({
										type : 'post',
										url : 'removeUsers',
										data : {
											'uid' : uid
										},
										dataType : 'json',
										success : function(data) {
											if (1 == data) {
												$.messager.show({
													title : '我的消息',
													msg : '注销成功',
													showType : 'show',
													timeout : 2000,
												})
												//重加载页面
												$('#dg').datagrid('reload');
											}else if(2 == data){
												$.messager.show({
													title : '我的消息',
													msg : '操作有误，该用户已被注销',
													showType : 'show',
													timeout : 2000,
												})
												//重加载页面
												$('#dg').datagrid('reload');
											} else {
												$.messager.show({
													title : '我的消息',
													msg : '注销失败',
													showType : 'show',
													timeout : 2000,
												});
											}
										}
									})
								})
							} else {
								//取消所选中的行
								$('#dg').datagrid('clearSelections');
							}
						})
					} else {
						$.messager.alert('我的消息', '请勾选您要删除的行', 'info');
					}
				}
			}, '-', {
				iconCls : 'icon-search',
				text : "查询用户",
				handler : function() {
					$('#win2').window('open');
					$('#tb111').textbox('clear');
					$('#tb222').textbox('clear');
				}
			} ],
			columns : [ [ {
				field : 'ck',
				width : 100,
				checkbox : true
			}, {
				field : 'uid',
				title : '用户编号',
				width : 100,
				align : 'center'
			}, {
				field : 'uname',
				title : '用户姓名',
				width : 100,
				align : 'center'
			}, {
				field : 'utel',
				title : '用户联系方式',
				width : 100,
				align : 'center'
			}, {
				field : 'ustate',
				title : '用户账号状态',
				width : 100,
				align : 'center'
			}, {
				field : 'rname',
				title : '用户权限类型',
				width : 100,
				align : 'center'
			} ] ],
		});
		//新增用户确定按钮的事件
		$('#btn1').bind('click', function() {
			var uroot = $('#tb1').textbox('getValue');
			var upassword = $('#tb2').textbox('getValue');
			var uname = $('#tb4').textbox('getValue');
			var utel = $('#tb5').textbox('getValue');
			var rname = $('#tb6').textbox('getValue');
			var question = $('#tb7').textbox('getValue');
			var answer = $('#tb8').textbox('getValue');
			$.ajax({
				type : 'post',
				url : 'insertUser',
				data : {
					'uroot' : uroot,
					'upassword' : upassword,
					'uname' : uname,
					'utel' : utel,
					'rname' : rname,
					'question' : question,
					'answer' : answer,
				},
				dataType : 'json',
				success : function(data) {
					if (data == 1) {
						$.messager.show({
							title : '我的消息',
							msg : '新增用户成功',
							timeout : 2000,
							showType : 'slide'
						});
						$('#dg').datagrid('reload');
						$('#win').window('close');
					} else if (data == 2) {
						$.messager.show({
							title : '我的消息',
							msg : '该用户名已经存在',
							timeout : 2000,
							showType : 'slide'
						});
					} else if (data == 3) {
						$.messager.show({
							title : '我的消息',
							msg : '请输入登录账号',
							timeout : 2000,
							showType : 'slide'
						});
					} else if (data == 4) {
						$.messager.show({
							title : '我的消息',
							msg : '请输入密码',
							timeout : 2000,
							showType : 'slide'
						});
					} else if (data == 5) {
						$.messager.show({
							title : '我的消息',
							msg : '请输入用户姓名',
							timeout : 2000,
							showType : 'slide'
						});
					} else if (data == 6) {
						$.messager.show({
							title : '我的消息',
							msg : '请输入联系方式',
							timeout : 2000,
							showType : 'slide'
						});
					} else if (data == 7) {
						$.messager.show({
							title : '我的消息',
							msg : '请选择该用户的权限类型',
							timeout : 2000,
							showType : 'slide'
						});
					} else if (data == 8) {
						$.messager.show({
							title : '我的消息',
							msg : '请选择密保问题',
							timeout : 2000,
							showType : 'slide'
						});
					} else if (data == 9) {
						$.messager.show({
							title : '我的消息',
							msg : '请输入密保答案',
							timeout : 2000,
							showType : 'slide'
						});
					} else {
						$.messager.show({
							title : '我的消息',
							msg : '新增用户失败',
							timeout : 2000,
							showType : 'slide'
						});
					}
				}
			})
		});
		
		//取消新增用户按钮的事件
		$('#btn2').bind('click', function() {
			$('#win').window('close');
		});

		//用户信息修改确认按钮的事件
		$('#btn3').bind('click', function() {
			var uid = $('#tb11').textbox('getValue');
			var uname = $('#tb22').textbox('getValue');
			var ustate = $('#tb44').textbox('getValue');
			var rname = $('#tb55').textbox('getValue');
			$.ajax({
				url : 'updateUser',
				type : 'post',
				data : {
					'uid' : uid,
					'uname' : uname,
					'ustate' : ustate,
					'rname' : rname,
				},
				dataType : 'json',
				success : function(data) {
					if (data == 1) {
						$.messager.show({
							title : '我的消息',
							msg : '修改成功',
							timeout : 2000,
							showType : 'slide'
						})
						$('#dg').datagrid('reload');
						$('#win1').window('close');
					}else if(data == 2){
						$.messager.show({
							title : '我的消息',
							msg : '您没有进行任何修改',
							timeout : 2000,
							showType : 'slide'
						})
						$('#dg').datagrid('reload');
						$('#win1').window('close');
					} else {
						$.messager.show({
							title : '我的消息',
							msg : '修改失败',
							timeout : 2000,
							showType : 'slide',
						})
						$('#dg').datagrid('reload');
						$('#win1').window('close');
					}
				}
			})
		});
		//用户信息修改取消按钮的事件
		$('#btn4').bind('click', function() {
			$('#dg').datagrid('clearSelections');
			$('#win1').window('close');
		});
		
		//查询提交
		$('#btn5').bind('click', function() {
			$('#win3').window('open');
			$('#win2').window('close');
			$('#dg1').datagrid({
				queryParams: {
					searType: $('#tb111').textbox('getValue'),
					sertInfo: $('#tb222').textbox('getValue')
				},
				url : 'serachUsersByInfo',
				columns :[ [ {
					field : 'uid',
					title : '用户编号',
					width : 100,
					align : 'center'
				}, {
					field : 'uname',
					title : '用户姓名',
					width : 100,
					align : 'center'
				}, {
					field : 'utel',
					title : '用户联系方式',
					width : 100,
					align : 'center'
				}, {
					field : 'ustate',
					title : '用户账号状态',
					width : 100,
					align : 'center'
				}, {
					field : 'rname',
					title : '用户权限类型',
					width : 100,
					align : 'center'
				} ] ],
				fitColumns : true,
				rownumbers : true,
				pagePosition : 'bottom',
				pagination : true,
			})		
		});
		
		//取消查询
		$('#btn6').bind('click', function() {
			$('#win2').window('close');
		});
		//密保问题选择下拉菜单
		$('#tb7').combobox({
			url : 'searchQuestions',
			valueField : 'question',
			textField : 'question',
			lines : true,
			editable : false,
			panelHeight : 'auto',

		});
		//权限选择下拉菜单
		$('#tb6').combobox({
			url : 'showRoles',
			valueField : 'rname',
			textField : 'rname',
			lines : true,
			editable : false,
			panelHeight : 'auto',

		});
		//权限选择下拉菜单
		$('#tb55').combobox({
			url : 'showRoles',
			valueField : 'rname',
			textField : 'rname',
			lines : true,
			editable : false,
			panelHeight : 'auto',
		});
		//权限选择下拉菜单
		$('#tb44').combobox({
			lines : true,
			editable : false,
			panelHeight : 'auto',
			valueField : 'label',
			textField : 'value',
			data:[ {
				label : '正常',
				value : '正常'
			},{
				label : '已注销',
				value : '已注销'
			}]
		});
		
		//查询界面下拉菜单
		$('#tb111').combobox({    
			lines : true,
			editable : false,
			panelHeight : 'auto',
			valueField : 'label',
			textField : 'value',
			data: [{
				label: 'uid',
				value: '用户编号'
			},{
				label: 'uname',
				value: '用户姓名'
			},{
				label: 'utel',
				value: '联系方式'
			},{
				label: 'ustate',
				value: '账号状态'
			}]
	
		});

	})
</script>
<body>
	<!-- 展示所有用户信息 -->
	<table id="dg"></table>

	<!-- 新建用户 -->
	<div id="win" class="easyui-window" title="用户详细信息"
		style="width: 700px; height: 500px"
		data-options="iconCls:'icon-save',modal:true,closed:true">
		<div id="insert" style="margin-left: 150px; margin-top: 70px">
			   登录账号<input id="tb1" class="easyui-textbox"style="width:200px; heigh:20px"data-options="validType:'length[3,10]'"><br><br> 
			   登录密码<input id="tb2" type="password" class="easyui-textbox"style="width:200px; heigh:20px" data-options="validType:'length[3,10]'" data-options="validType:'length[3,16]'"/><br><br> 
			   密码确认<input id="tb3" type="password" class="easyui-textbox"style="width:200px; heigh:20px"validType="equalTo['#tb2']"/><br><br> 
			   用户姓名<input id="tb4" class="easyui-textbox"style="width:200px; heigh:20px"/><br><br> 
			   联系方式<input id="tb5" class="easyui-textbox"style="width:200px; heigh:20px" validType:'length[5,20]'"/><br><br> 
			   权限类型<input id="tb6" class="easyui-textbox"style="width:200px; heigh:20px"/><br><br> 
			   密保问题<input id="tb7" class="easyui-textbox"style="width:200px; heigh:20px"/><br><br> 
			   密保答案<input id="tb8" class="easyui-textbox"style="width:200px; heigh:20px"/><br><br>
			<div style="margin-left: 100px; margin-top: 30px">
				<a id="btn1" href="#" class="easyui-linkbutton"
					data-options="iconCls:'icon-ok'">确定</a> <a id="btn2" href="#"
					class="easyui-linkbutton" data-options="iconCls:'icon-no'">取消</a>
			</div>
		</div>
	</div>


	<!-- 修改用户信息的表格 -->
	<div id="win1" class="easyui-window" title="修改用户信息"
		style="width: 600px; height: 400px"
		data-options="iconCls:'icon-save',modal:true,closed:true">

		<div id="update" style="margin-left: 150px; margin-top: 70px">
			用户编号<input id="tb11" class="easyui-textbox"style="width: 200px; height: 20px"><br> <br>
			用户姓名<input id="tb22" class="easyui-textbox" style="width: 200px; height: 20px"><br><br>
			联系方式<input id="tb33" class="easyui-textbox"style="width: 200px; height: 20px"><br> <br>
			账号状态<input id="tb44" class="easyui-textbox" style="width: 200px; height: 20px"><br><br>
			权限类型<input id="tb55" class="easyui-textbox"style="width: 200px; height: 20px"><br><br>
			<div style="margin-left: 100px; margin-top: 30px">
				<a id="btn3" href="#" class="easyui-linkbutton"
					data-options="iconCls:'icon-ok'">确定</a> <a id="btn4" href="#"
					class="easyui-linkbutton" data-options="iconCls:'icon-no'">取消</a>
			</div>
		</div>
	</div>
	
	
		<!-- 用户查询页面 -->
<div id="win2" class="easyui-window" title="库存查询" style="width: 600px; height: 400px" data-options="iconCls:'icon-save',modal:true,closed:true">
     <div id="serach" style="margin-left: 150px; margin-top: 70px">
<!-- 下拉选择+输入 -->
        <div>
请选择想查询的类别<input id="tb111" class="easyui-textbox" style="width: 200px; heigh: 20px"required=true><br><br>
请选择想查询的内容<input id="tb222" class="easyui-textbox" style="width: 200px; heigh: 20px"required=true><br><br>
                <a id="btn5" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确定</a> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a id="btn6" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">取消</a>
        </div>
	</div>
</div>



<!-- 查询内容展示 -->
<div id="win3" class="easyui-window" title="用户查询" style="width: 600px; height: 400px" data-options="iconCls:'icon-save',modal:true,closed:true">
<table id="dg1"></table>
</div>

</body>
</html>